<template>
	<view class="story-wrapper" @click.native="inputDialogToggle">
		<view class="story">
			<view>
				<text class="story-content-title">个人故事</text>
			</view>
			<view class="story-content">
				<rich-text class="story-content-txt">{{ value }}</rich-text>
			</view>
		</view>
		
		<view>
			<uni-popup ref="inputDialog" type="center">
				<view class="dialog-wrapper">
					<text class="title">个人故事</text>
					<textarea class="story-input" placeholder="请输入你的故事" v-model="storyInput" maxlength="200" @input="sumfontnum"></textarea>
					<view class="fontnumbox"><text>{{fontnum}}/200</text></view>
					<view class="btn-dock">
						<button class="btn-cancel" @click="dialogCancel()">取消</button>
						<button class="btn-save" form-type="submit" @click="dialogInputConfirm(storyInput)">保存</button>
					</view>
				</view>
				<!--<uni-popup-dialog ref="inputClose"  mode="input" title="我的故事" value="我叫王小明..."
					placeholder="请输入故事" @confirm="dialogInputConfirm"></uni-popup-dialog>-->
			</uni-popup>
		</view>
		
	</view>
</template>

<script>
import { BASE_URL } from '../../api';
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		props: {
			userData: {
				type: Object,
				default: {},
			}
		},
		computed: {
			...mapState(['token', 'children'])
		},
		data() {
			return {
				value: '我叫王小明...',
				storyInput: '我叫王小明...',
				fontnum: '0',
				id: '',
				isOpen: false,
			}
		},
		onReady() {},
		updated() {
			console.log("调用我！");
			if(this.userData.story) {
				this.value = this.userData.story;
			}else {
				this.value = '我叫王小明...';
			}
			this.id = this.userData.childrenId;
			// uni.$on('getUser', res=>{
			// 	this.value = res.story;
			// 	console.log(res);
			// })
		},
		methods: {
			inputDialogToggle() {
				if(!this.isOpen){
					if(this.userData.story) {
						this.storyInput = this.userData.story;
					}else{
						this.storyInput = '我叫王小明...';
					}
					this.fontnum = this.storyInput.length;
					/*if(this.storyInput) {
						
					}*/
					this.isOpen = true;
				}
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm(val) {
				uni.showLoading({
					title: '正在保存'
				})
				
				uni.request({
					url: BASE_URL + '/children?childrenId=' + this.userData.childrenId,
					method: 'PUT',
					header: {
						"Authorization": this.token,
					},
					data: {
						story: this.storyInput,
					},
					success: (res) => {
						this.text = 'request success';
						console.log(this.text);
					}
				});
				setTimeout(() => {
					uni.hideLoading()
					console.log(val)
					this.value = val
					// 关闭窗口后，恢复默认内容
					uni.reLaunch({
					    url: '/pages/my/my'
					})
					this.isOpen = false;
					this.$refs.inputDialog.close()
				}, 200);
			},
			dialogCancel() {
				this.isOpen = false;
				this.$refs.inputDialog.close()
			},
			sumfontnum(e) {
				console.log(e)
				this.fontnum = e.detail.value.length;
			},
		}
	}
</script>


<style>
	@import url("mystory.css");
</style>